<!DOCTYPE html>
<html style="font-size: 46.875px;">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no" name="viewport">
        <link rel="stylesheet" href="/static/css/Chat3.css">
        <title>聊天消息-音速风暴</title>
        <script type="text/javascript">
            !function(e,i){"use strict";var t=function(){var i=e.navigator.userAgent,t=i.length,n=i.replace(/iphone|ipad|ipod|android|Series60|BlackBerry|Windows Phone|Mobile/gi,"").length;return n!=t}(),n=i.querySelector('meta[name="viewport"]'),a=1,r=1,o=e.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);a=o?Math.min(e.devicePixelRatio,3):1,a=e.top===e.self?a:1,r=1/a,n.setAttribute("content","width=device-width,initial-scale="+r+",maximum-scale="+r+", minimum-scale="+r+",user-scalable=no"),e.topscale=r;var c=function(){var n=i.documentElement,a=n.clientWidth;!t&&a>750&&(a=750,e.ispcview=!0);var r=20*a/320;n.style.fontSize=r+"px",e.htmlsize=r};c();var l="orientationchange"in e?"orientationchange":"resize";e.addEventListener(l,c,!1)}(window,document)
        </script>
    </head>
    <body>
        <div class="main">
            <div class="chat_app" >
                <div class="chat_area" >
                    <div class="chat_header" >
                        <div >
                            <a class="hd_back" href="javascript:;" onclick="history.back();">返回</a> 
                            <span class="common_hd_logo" >&nbsp;</span> 
                            <span class="unread_count" >
                                <em class="unread_count_em" >0</em>
                                <span class="countimg"></span>
                            </span>

                            <h1 class="hd_tle" >音速风暴客服留言</h1>
                        </div>
                    </div>

                    <div class="chat_main" >
                        <div class="message_content" > 
                            <div class="loader" style="height:auto;" data-reactid=".2.0.1.0.0">
                                <div class="com_loader" style="display:none"></div>
                                {% if end_time %}
                                <a class="loadmore" href="javascript:;" style="text-decoration:none;color:#74abd6" end_time="{{end_time}}">加载更多...</a>
                                {% endif %}
                            </div>
                            {% for message in messages %}
                            {% if not message.get('openid') %}
                            <div class="message_item" >
                                <div class="apart_time" >
                                    <span >{{ pDT(message.get('CreateTime'), '%Y-%m-%d %H:%M:%S', False, True) }}</span>
                                </div>                        
                                <div class="imc_li_receive" >
                                    <div class="content" >
                                        <div class="buble_arrow" ></div>

                                        <div class="message_content_wrapper" >
                                            <div class="emojiDiv" >
                                                {% if message.get('MsgType') == 'text'%}
                                                {{ message.get('Content') }}
                                                {% elif message.get('MsgType') == 'image' %}
                                                <img src="https://api.weixin.qq.com/cgi-bin/media/get?access_token={{ we_ac }}&media_id={{ message.get('MediaId') }}">
                                                {% else %}
                                                [{{ message.get('MsgType') }}]
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="user_info" >
                                        <div class="avatar" ><img class="img" src="{{ user.get('headimgurl') or '/static/images/getheadimg.png' }}" alt="" ></div>
                                        <h3 class="nickname" ><span class="nickname_text" >{{ user.get('nickname_emoji') or user.get('nickname') }}</span></h3>
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <div class="message_item" >
                                <div class="apart_time" >
                                    <span >{{ pDT(message.get('CreateTime'), '%Y-%m-%d %H:%M:%S', False, True) }}</span>
                                </div>

                                <div class="imc_li_send" >
                                    <div class="content margin_top">
                                        <div class="buble_arrow" ></div>

                                        <div class="message_content_wrapper" >
                                            <div >
                                                {{ message.get('Content') }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="user_info" >
                                        <div class="avatar" ><img class="img" src="{{ message.get('kf_headimgurl') or '/static/images/Chat/person.jpg'}}" alt="" ></div>
                                        <h3 class="nickname" ><span class="nickname_text" >{{ message.get('kf_nick') or '微信公众号'}}</span></h3>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="infoEditArea">
                        <div>
                            <div class="tool_bar">
                                <div class=" tool_item">
                                    <span class="faceitem"><em></em><i></i></span>
                                </div>
                                <div class="inputtextDiv" style="margin-left:1.322rem;">
                                    <div class="composer">
                                        <form id="send_form" to_openid="{{ user.get('openid') }}">
                                        <div class="edit_area">
                                            <input type="text" class="inputValue" placeholder="请输入您的消息"
                                            />
                                        </div>
                                        <div class="action">
                                            <div class="send_btn" type="submit">发送</div>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display:none" id="backup">
            <div class="message_item" >
                <div class="apart_time" >
                    <span >上午 8:20</span>
                </div>

                <div class="imc_li_send" >
                    <div class="content margin_top">
                        <div class="buble_arrow" ></div>

                        <div class="message_content_wrapper" >
                            <div >
                                文本測試.
                            </div>
                        </div>
                    </div>
                    <div class="user_info" >
                        <div class="avatar" ><img class="img" src="/static/images/Chat/person.jpg" alt="" ></div>
                        <h3 class="nickname" ><span class="nickname_text" >微店公众号</span></h3>
                    </div>
                </div>
            </div> 
            
        </div>
    </body>
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        //$('input').focus()
        var m_backup = $('#backup .message_item');
        var message_content = $('.message_content');
        message_content.scrollTop(message_content[0].scrollHeight);
        $('.send_btn').click(function(){
            $(this).parents('form').submit()
        }).css('cursor','pointer');
        $('form#send_form').submit(function(e){
            e.preventDefault();
            var self = $(this);
            var openid = self.attr('to_openid');
            var input = self.find('input');
            var message = input.val();
            if(!message){alert('不能发送空内容');return;}
            input.val('');
            $.post('?action=sendmessage&openid='+openid, {'message': message}, function(data){
                console.info(data);
                ret = JSON.parse(data);
                addmessage(ret);
            });
        })
        addmessage = function(data){
            var message_item = m_backup.clone();            
            message_item.find('.apart_time span').text(data['CreateTime']);
            message_item.find('.message_content_wrapper div').text(data['Content']);
            if(data.kf_headimgurl){
                message_item.find('.avatar img').attr('src', data.kf_headimgurl);
            }
            if(data.kf_nick){
                message_item.find('.nickname_text').text(data.kf_nick);
            }
            message_content.append(message_item);
            message_content.scrollTop(message_content[0].scrollHeight);
        }
        $('input.inputValue').bind('keypress', function(e){
           // console.info(e)
           // $('.send_btn').click();
        })
        $('.loadmore').click(function(){
            var self = $(this);
            var end_time = self.attr('end_time');
            var loader = $('.com_loader');
            self.hide();
            loader.show();
            $.post('?action=loadmore&end_time='+end_time, function(data){
                console.info(data);
                //loader.hide();
                //self.show();
            })
        })
    </script>
</html>
